<!doctype html>

<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>CleanRed | Web Designer Portfolio</title>

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/belatedPNG.js"></script>
<script>
	DD_belatedPNG.fix('*');
</script>
<![endif]-->

</head>

<body>
<div id="wrap">
<section id="left">
	<header id="mainheader">
	<a href="index.html"><img src="images/logo.jpg" width="250" height="120" alt="CleanRed | Free CSS Template"></a> 
    <h1 id="sitename">YourDomain.Com - Welcome to CleanRed's Web Design Portfolio</h1>
    </header>
    <nav id="mainnav">
		<ul>
        	<li><a href="index.html">Home</a></li>
            <li><a href="works.html">Works</a></li>
            <li class="current"><a href="single.html">Blog</a></li>
            <li><a href="page.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
	</nav>

	<div id="search">
    	<form action="#">
        <div id="searchfield"><input type="text" name="search" id="s"></div>
      	<div id="searchbtn"><input type="image" src="images/searchgobtn.png" alt="search"></div>
        </form>
	</div>
    
    <section id="sidebar">
    <div class="sb-block">
    <a href="http://www.cssheaven.org"><img src="images/cssheavenbrn.jpg" width="182" height="174" alt="css heaven free css templates"></a> 
    </div>
    
    <div class="sb-block">
    <h2>Categories</h2>
    <ul>
    	<li><a href="#">Web Design</a></li>
		<li><a href="#">Computers</a></li>
		<li><a href="#">Gadgets</a></li>
		<li><a href="#">CSS Templates</a></li>
		<li><a href="#">Graphics Design</a></li>
		<li><a href="#">Photography</a></li>
		<li><a href="#">General</a></li>
    </ul>
    </div>
    
    
    
    <div id="sociallinks"> <a href="#"><img src="images/fb-icon.jpg" width="33" height="32" alt="facebook"></a> <a href="#"><img src="images/twt-icon.jpg" width="33" height="32" alt="twitter"></a> <a href="#"><img src="images/flkr-icon.jpg" width="33" height="32" alt="flickr"></a> <a href="#"><img src="images/be-icon.jpg" width="33" height="32" alt="behance"></a> </div>
    </section>
</section>

<section id="right">
	
    <header id="header-small">
    <h2>Blog</h2>
   </header>
  <div class="clear"></div>
  
    <section id="contents">
    <section id="homemain">
    <article class="post singlepost">
    <header>
    <h2><a href="#">Article Title</a></h2>
    <span class="articlemeta">Posted on 12 June 2010 under <a href="#">CSS Templates</a></span>
    
    </header>
    <div class="entry">
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae lorem justo, a scelerisque massa. Proin est lectus, ornare nec tristique id, varius a nulla. Nulla aliquet erat at velit suscipit pharetra. Nulla facilisi. Mauris in semper enim. Curabitur vehicula fermentum libero, non tempor massa tempus ac. Vestibulum ac ante quis erat consectetur blandit nec et ante. Proin gravida scelerisque molestie. Donec congue auctor nunc, vitae scelerisque turpis hendrerit ut. Donec sit amet odio id metus varius tempus. Vestibulum sodales, libero porta pretium fermentum, lectus purus tempus magna, sit amet sollicitudin ipsum nibh quis felis. In hac habitasse platea dictumst. Suspendisse at dui at ante semper bibendum.</p>
    <p><img src="images/rain.jpg" width="170" height="113" alt="rain" class="alignleft"></p>
    <p>

Cras feugiat enim felis, vel rutrum nisl. Morbi vulputate, orci et viverra vestibulum, lacus elit vestibulum est, vel ultrices est erat non est. Nullam tincidunt tellus sed sem sodales vulputate. Sed odio ligula, ultrices id vehicula eu, vehicula sit amet risus. Aenean ut quam tellus. Etiam a leo et eros tempor vestibulum eget sed odio. Mauris non rhoncus ante. Pellentesque ut leo nec quam tincidunt faucibus. Aenean et viverra eros. Maecenas eu mauris eget mauris dignissim tempor nec a libero. Mauris bibendum porta urna vitae ornare.
</p>
<p>
Aenean eu lectus in magna imperdiet tincidunt. Vivamus in justo nisi. Morbi id gravida dui. Phasellus sollicitudin, sapien at sollicitudin sodales, massa purus rutrum purus, non fermentum sapien eros eu leo. Integer dignissim luctus massa in varius. Phasellus eget nulla a lectus vestibulum gravida. </p>
<ul>
  <li>Nullam vestibulum sapien non metus hendrerit a dignissim odio cursus.</li>
  <li> Donec posuere euismod rutrum. Praesent malesuada magna quis leo sagittis interdum.</li>
  <li> Aenean nisi erat, rhoncus consequat commodo non, cursus in quam. </li>
  <li>Sed vel lorem sed enim porttitor molestie ac sed eros. </li>
  <li>Etiam eget dolor ut mi ornare posuere id at dolor.</li>
  <li> Suspendisse nec neque lectus, in facilisis quam. </li>
  <li>Fusce sed dolor metus, ac ultricies diam.</li>
  <li> Aliquam erat volutpat. </li>
</ul>
    </div>
    </article></section>
    
    
    <aside id="rightsidebar">
    <div class="imagepost">
    <img src="images/articleimage.jpg" width="170" height="165" alt="rain">
    <p class="caption">Improve your usability skills</p>
    </div>
	<p class="commentlink">
    <a href="#">12 Comments</a></p>
    </aside>
    <div class="clear"></div>
    
   <div class="endofpost">   
   
   <div class="tags">
   
  	<p>Learn More about : <a href="#">Web Design</a>, <a href="#">CSS Templates</a>, <a href="#">Usability</a>, <a href="#">Layout</a></p>
   </div>
   <div class="social">
     <img src="images/ico-digg.png" width="20" height="20" alt="digg"> <img src="images/ico-twtr.png" width="20" height="20" alt="tweet"> <img src="images/ico-stumble.png" width="20" height="20" alt="stumble"> <img src="images/ico-del.png" width="20" height="20" alt="delicious"><img src="images/ico-rss.png" width="20" height="20" alt="subscribe"></div>
   </div>
    <section id="comments">

<h3>47 Responses to "Article Title</h3>
<div id="commentlist">
<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>

</div>
<div class="clear"></div>
</article>

<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>
<div class="commentreply">

<a href="#Reply" class="reply">Reply</a>
</div>
</div>
<div class="clear"></div>
</article>

<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>

</div>
<div class="clear"></div>
</article>

<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>

</div>
<div class="clear"></div>
</article>

<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>

</div>
<div class="clear"></div>
</article>

<article class="entry">
<div class="avatar"> 
<img src="http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=38">
<p class="author">
<span class="name"><a href="#">CleanRed</a></span>
<time class="date">12 June 2010</time>

</p>
</div>
<div class="comment">

<p>Pellentesque vel erat ac elit ultrices dignissim a ut velit. Donec laoreet sem a turpis viverra ut aliquet odio interdum. Nunc consequat rhoncus vehicula. Cras iaculis enim in neque hendrerit eget laoreet mi adipiscing.</p>

</div>
<div class="clear"></div>
</article>
</div>

 <h3 id="respond">Leave a Reply</h3>
<form action="#" method="post" id="commentform">
   <p class="textfield">
       <input name="author" id="author" value="" size="22" tabindex="1" type="text">
          <label for="author">
             <small>Name (required)</small>
          </label>
   </p>
   <p class="textfield">
       <input name="email" id="email" value="" size="22" tabindex="2" type="text">
          <label for="email">
              <small>Mail (will not be published) required)</small>
          </label>
   </p>
   <p class="textfield">
       <input name="url" id="url" value="" size="22" tabindex="3" type="text">
          <label for="url">
             <small>Website</small>
          </label>
   </p>
   <p>
       <small><strong>XHTML:</strong> You can use these
       tags:....</small>
   </p>
   <p class="text-area">
       <textarea name="comment" id="comment" cols="50" rows="10" tabindex="4">
       </textarea>
   </p>
   <p>
       <input name="submit" id="submit" tabindex="5" type="image" src="images/submit.png">
       <input name="comment_post_ID" value="1" type="hidden">
   </p>
   <div class="clear"></div>
</form>

</section>
    
    
    </section>
</section>
<div class="clear"></div>
</div>
<footer id="pagefooter">

<div id="footerwrap">

<div id="about">

<h2>About</h2>
<div class="myphoto">


  <img src="images/imgthumb.jpg" width="120" height="130" alt="your photo"></div>
<div class="about-text">
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis placerat eleifend. Nam vel cursus nulla. Nunc quis tellus et tellus auctor ullamcorper. Cum sociis natoque 		
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id purus risus, id vestibulum felis. <a href="/about"> Read More </a></p>

</div>
</div>
<div id="services">
<h2>Services</h2>
<ul>

	<li>Website &amp; UI design</li>
	<li>WordPress Themes</li>
	<li>Custom CSS Templates</li>
	<li>PSD to HTML / CSS</li>
	<li>Graphics Design</li>
	<li>Web Development</li>
</ul>
</div>
<div id="tools">
<h2>Expertise</h2>
<ul>

	<li>Clean, Accessible &amp; Usable Web Designs.</li>
    <li>HTML, XHTML, HTML5, CSS3 &amp; jQuery</li>
    <li>Developing Custom WordPress Themes</li>
    <li>Graphics Design</li>
    <li>Web Development</li>
    <li>Web Standards</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="credits">
2010 &copy; YourDomain.Com | Web Designer  | <a href="http://www.cssmoban.com/" title="网站模板" target="_blank">网站模板</a> collect from www.cssmoban.com </div>
</footer>
</body>
</html>
